<!-- 我发起的 -->
<template>
	<zh-space>
		<!-- 查询条件栏 -->
		<zh-card title="查询条件" :bordered="true">
			<zh-form :model="data.formData" ref="queryFormRef">
				<zh-form-select prop="authStatus" label="审核状态" placeholder="请选择" v-model="data.formData.authStatus" :options="data.dict.authDict" />
				<zh-form-input prop="appName" label="应用名称" placeholder="请输入应用名称(模糊查询)" v-model="data.formData.appName" />
				<template v-if="data.advanced">
					<zh-form-input prop="appProjName" label="所属项目" placeholder="请输入所属项目名称(模糊查询)" v-model="data.formData.appProjName" />
					<zh-form-select prop="appType" label="应用类型" placeholder="请选择" v-model="data.formData.appType" :options="data.dict.appTypeDict" />
				</template>
				<zh-form-query v-model="data.advanced" @queryClick="query" :formRef="queryFormRef"></zh-form-query>
			</zh-form>
		</zh-card>
		<!-- 查询结果栏 -->
		<zh-table title="" :columns="data.tableColumn" :data="data.tableData" highlight-current-row ref="queryTable" v-on="gridEvents" :height="data.tableHeight">
			<!-- 操作按钮组 -->
			<!-- <template #control_default="{ row }">
				<zh-button link size="small" type="primary" :disabled="row.authStatus != '2'" @click="reApply(row)"> {{ row.operation }} </zh-button>
			</template> -->
			<template #appState_default="{ row }">
				<zh-badge v-show="row.busiType != 'app_release20009'" :status="data.flagMap[Number(row.authStatus)].status" :text="row.authStatusName" class="badge" />
				<zh-badge v-show="row.busiType == 'app_release20009'" :text="row.authStatusName" class="badge" />
			</template>
		</zh-table>

		<!-- 侧边更多查询栏 -->
		<el-drawer v-model="data.drawer" title="审核信息" custom-class="demo-drawer">
      <img src="@/assets/img/learnInDongyang/4.jpeg" class="drawer-img" />
			<!-- 描述列表 -->
			<el-descriptions :title="data.formData.appName" :column="1" size="large" border style="margin-top: 0px">
				<el-descriptions-item>
					<template #label>
						<div>
							<el-icon style="margin-right: 8px"> <office-building /> </el-icon>审核人：
						</div>
					</template>
					张三
				</el-descriptions-item>
        <el-descriptions-item>
					<template #label>
						<div>
							<el-icon style="margin-right: 8px"> <office-building /> </el-icon>联系电话：
						</div>
					</template>
					130777777777
				</el-descriptions-item>
        <el-descriptions-item>
					<template #label>
						<div>
							<el-icon style="margin-right: 8px"> <office-building /> </el-icon>审核状态：
						</div>
					</template>
					{{ data.audit }}
				</el-descriptions-item>
			</el-descriptions>
		</el-drawer>
	</zh-space>
</template>
<script lang="ts" setup name="myPost">
// import router from '@/router';
import { VxeGridListeners } from 'vxe-table';

// -------------------初始化------------------------------
onMounted(() => {
  // 浏览器的视口高度
  const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  data.tableHeight = height - 280

	getDict();
	query();
});
// ------------------内部变量定义-------------------------
// 表单实例
const queryFormRef = ref<any>();
// 主数据对象
const data = reactive({
	// 表单对象
	formData: {
		busiType: '' as string,
		appName: '' as string,
		appType: null as any,
		authStatus: null as any,
		appProjName: '' as string,
	} as any,
	// 查询结果表--表头
	tableColumn: [
		{
			field: 'appInfoId',
			title: '表单明细id',
			visible: false,
			align: 'center',
			minWidth: 80,
		},
		{
			type: 'seq',
			minWidth: 10,
			fixed: 'left',
			align: 'center',
			title: '序号',
		},
		{
			field: 'appName',
			title: '应用名称',
			visible: true,
			align: 'center',
			minWidth: 160,
		},
		{
			field: 'summary',
			title: '摘要',
			visible: true,
			align: 'center',
			minWidth: 200,
		},
		{
			field: 'busiTypeName',
			title: '业务类型',
			visible: true,
			align: 'center',
			minWidth: 100,
		},
		{
			field: 'createTime',
			title: '申请时间',
			visible: true,
			align: 'center',
			minWidth: 100,
		},
		{
			field: 'authStatus',
			titlePrefix: { useHTML: true, content: '点击对应的审核单元格显示相应审核相关信息' },
			filterMultiple: false,
			title: '审核状态',
			visible: true,
			fixed: 'right',
			align: 'center',
			minWidth: 100,
			slots: {
				default: 'appState_default',
			},
		},
		// {
		// 	field: 'operate',
		// 	title: '操作',
		// 	fixed: 'right',
		// 	align: 'center',
		// 	minWidth: 150,
		// 	slots: {
		// 		// 使用插槽模板渲染
		// 		default: 'control_default',
		// 	},
		// },
	] as Array<Object>,
	// 查询结果表--内容
	tableData: [] as Array<any>,
	// 按钮样式
	btnBlue: 'color: #409EFF' as string,
	btnGrey: 'color: grey' as string,
	// 审核弹窗显示状态
	auditDialog: false as boolean,
	// 当前应用审核对象
	toAuditMainObj: {} as any,
	//审核状态图标列表
	flagMap: {
		0: {
			status: 'processing',
		},
		1: {
			status: 'success',
		},
		2: {
			status: 'error',
		},
  },
  // 侧边栏显示标记
  drawer: false,
	// 数据字典对象
	dict: {
		// 审核状态字典
		authDict: [] as Array<any>,
		// 应用领域字典
		appFieldDict: [] as Array<any>,
		// 应用类型字典
		appTypeDict: [] as Array<any>,
	},
  advanced: false,
  // 审核结果
  audit: '' as string,
  // 表格高度
	tableHeight: 500,
});
// ------------------定义调用方法-------------------------
// 查询按钮的回调
const query = () => {
	let params = data.formData;
	$api.common.send.post('appInfo0018', params).then((res: any) => {
		data.tableData = res.result.list;

		for (const item of data.tableData) {
			item.summary == null ? (item.summary = '/') : '';
			if (item.busiType == 'app_release20009') {
				item.authStatusName = '/';
			}

			// getSameNum(item.appId, item.busiType, '2', data.tableData) === 1 ? item.operation = '重新申请' : item.operation = '/';
			// console.log('getSameNum = ', getSameNum(item.appId, item.busiType, '2', data.tableData));
		}
	});
};
// 获取数组中同个业务下相同应用审核不通过的个数
// const getSameNum = (appId: string, busiType: string, authStatus: string ,arr: Array<any>) => { // appId:相同的元素, arr 传入数组
//   const processArr = arr.filter(function (item) {

//     if (item.appId !== null && item.busiType !== null && item.authStatus != null) {
//       console.log('item = ', item);
//       console.log('appId = ', item.appId);
//       return item.appId == appId && item.busiType == busiType && item.authStatus == authStatus;
//     }
//     return false;
// 	});
// 	return processArr.length;
// };
// 查询数据字典信息
const getDict = () => {
	let params = {
		dictFields: 'AUTHSTATUS,APPTYPE,APPFIELD',
	};
	$api.common.getBatchDict.post(params).then((res: any) => {
		data.dict.authDict = res.result.AUTHSTATUS;
		data.dict.appFieldDict = res.result.APPFIELD;
		data.dict.appTypeDict = res.result.APPTYPE;
	});
};
// 表格双击事件
const gridEvents: VxeGridListeners = {
	cellClick ({ row }) {
    console.log(row);
    data.audit = row.authStatusName;
    data.drawer = true;
	},
};
// 重新申请
// const reApply = (data: any) => {
// 	let path = '/appManage/appRegister';
// 	data.busiType != 'appInfo0010' ? (path = '/appManage/appReleaseModel') : '';
// 	router.push({
// 		path: path,
// 		query: data,
// 	});
// };
</script>
<style lang="scss" scoped>
.drawer-img {
  width: 100%;
  height: 60%;
}
</style>
